<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
<style type="text/css">
body{padding:15px;}
</style>
</head>
<body>
<!-- 不用form 用div也可以 -->
<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
             <input type="checkbox" checked name="state" value="1" lay-filter="onoff" lay-skin="switch" lay-text="开启|关闭">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-filter="form-submit" lay-submit>提交</button>
        </div>
    </div>
</form>
<script type="text/javascript" src="./layui/layui.js"></script>
<script type="text/javascript">
layui.use('form', function(){
    var form = layui.form;
    form.on('switch(onoff)', function(data){
        console.log(data.elem.checked);
        console.log(data.value);
        //console.log(data.elem); //得到checkbox原始DOM对象
        //console.log(data.elem.checked); //开关是否开启，true或者false
        //console.log(data.value); //开关value值，也可以通过data.elem.value得到
        //console.log(data.othis); //得到美化后的DOM对象
    });
    // 表单提交
    form.on('submit(form-submit)',function(data){
        console.log('我提交了');
        console.log(data.field); // 表单数据 {name:value}
        // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
        // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
        // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        // 用于提交成功初始化表单
        form.val("form-box",{
            'username':'',
        });
    });
});
</script>
</body>
</html>